<template>
   <section  style="height:350px; overflow:auto;">
        <div class="wp-sec-title">产品出库
        <div style=" text-align: right;margin-right:5px;">
         <el-button type="warning" @click.native="handleOut" v-if="canModify && outProductList.length>0 && stockUpProductList.length==0">出库</el-button>
         </div>
         </div>
        <el-table
                 size="medium"
                v-if="productList.length>0"
                stripe
                :data="productList"
                class="wp-product-table">
                <el-table-column label="产品名称" prop="productName" show-overflow-tooltip ></el-table-column>
                <el-table-column label="产品类型" prop="productType" :formatter="formatterProductType" show-overflow-tooltip></el-table-column>
                <el-table-column label="产品型号" prop="productModel"> </el-table-column>
                <el-table-column label="出库数量" prop="productNum"> </el-table-column>
                <el-table-column label="已出库" prop="outStockNum"> </el-table-column>
                <el-table-column label="待出库" prop="needOutStockNum"> </el-table-column>
                <el-table-column label="操作" v-if="stockUpProductList.length>0" align="center" >
                    <template slot-scope="scope" >
                        <el-button v-if="scope.row.stockUp===1"  type="primary" @click.native="handleStockUp(scope.row)">备货</el-button>
                    </template>
                </el-table-column>
        </el-table>
        <el-empty v-else></el-empty>
        <div class="wp-sec-title" style="margin-top:30px;">出库记录</div>
        <el-table
                size="medium"
                 v-if="stockRecordList.length>0"
                stripe
                :data="stockRecordList">
                <el-table-column label="产品名称" prop="productName"></el-table-column>
                <el-table-column label="产品类型" prop="productType" :formatter="formatterProductType" show-overflow-tooltip></el-table-column>
                <el-table-column label="产品型号" prop="productModel"></el-table-column>
                <el-table-column label="所属仓库" prop="warehouseName"></el-table-column>
                <el-table-column label="出库数量" prop="productNum"></el-table-column>
                <el-table-column label="出库时间" prop="stockDate">
                  <template slot-scope="scope">
                        {{ scope.row.stockDate | FormatDate('yyyy-MM-dd')}}
                  </template>
                </el-table-column>
                <el-table-column label="操作人" prop="operatorName"></el-table-column>
        </el-table>
        <el-empty v-else></el-empty>
        <Product-out-panel
         v-if="showProductOutPanel"
         :associateOrder="this.param.orderNo"
         :list.sync="outProductList"
        :visible.sync="showProductOutPanel"
        sourceType="salesOrder"
        :operationSubTypes="operationSubTypes"
        @afterSave="init"
        />
    </section>
</template>

<script>
import ProductOutPanel from '@/views/eims/components/productOutPanel'
import Mixins from '../mixins'
export default {
  props: {
    sourceType: {type: String, default: 'default'},
    param: {type: Object,
      default: () => {
        return {}
      }
    },
    height: {
      type: Number,
      default: 180
    }
  },
  watch: {
    param: {
      handler (nVal) {
        this.canModify = nVal && nVal.status === 3 && this.sourceType === 'default'
      },
      deep: true,
      immediate: true
    }
  },
  components: {ProductOutPanel},
  mixins: [Mixins],
  data () {
    return {
      canModify: false,
      productList: [],
      stockUpProductList: [], // 需备货产品
      outProductList: [], // 可出库产品
      stockRecordList: [],
      showProductOutPanel: false,
      operationSubTypes: [{value: 20, label: '销售单出库'}]
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.getOrderProductList(this.param.orderNo)
      this.getOrderStockRecordList(this.param.orderNo)
    },
    getOrderProductList (orderNo) {
      this.requestOption('getOrderProductStockList', orderNo, res => {
        this.productList = res.data || []
        if (this.productList.length > 0) {
          this.stockUpProductList = this.productList.filter(item => {
            return item.stockUp === 1
          })
          this.outProductList = this.productList.filter(item => {
            return item.stockUp === 0 && item.needOutStockNum > 0
          })
        }
      }, () => {
      })
    },
    getOrderStockRecordList (orderNo) {
      this.requestOption('getOrderStockRecordList', orderNo, res => {
        this.stockRecordList = res.data || []
      }, () => {
      })
    },
    handleOut () {
      this.showProductOutPanel = true
    },

    handleStockUp (row) {
      const param = {}
      param.orderNo = row.orderNo
      param.orderDetailNo = row.orderDetailNo
      this.requestOption('orderProductPreparation', param, res => {
        this.getOrderProductList(param.orderNo)
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
